<template>
  <div class="article-page">
    <nav class="my-nav van-hairline--bottom">
      <a href="javascript:;" @click="recommendArticle" :class="{ active: sorter === 'weight_desc' }">推荐</a>
      <a href="javascript:;" @click="newArticle" :class="{ active: sorter === null }">最新</a>
      <div class="logo"><img src="@/assets/logo.png" alt="" /></div>
    </nav>

    <!-- 内容部分，转变为插槽 -->
    <!-- 
      需求：分页加载，触底时加载更多：
      List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。
      此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。
      若数据已全部加载完毕，则直接将 finished 设置成 true 即可
    -->

    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <ProjectVantH5ArticleItem
        v-for="item in getInterviewRequestResult"
        :key="item.id"
        :item="item"
      ></ProjectVantH5ArticleItem>
    </van-list>
  </div>
</template>

<script>
// 引入组件：
import ProjectVantH5ArticleItem from '@/components/article-item.vue'
// 引入发起请求的组件
import { getInterviewRequest } from '@/api/article.js'

export default {
  name: 'article-page',
  components: {
    ProjectVantH5ArticleItem
  },

  data() {
    return {
      // 获取页面请求数据
      getInterviewRequestResult: [],
      current: 1, // 请求数据的当前页
      sorter: null, // 排序字段，推荐传 weight_desc，最新：可以不用传
      // 分页加载所需数据
      loading: false,
      finished: false
    }
  },

  async created() {
    // 下面五行移到了分页加载的 onLoad 事件中了
    // const { data } = await getInterviewRequest({
    //   current: this.current,
    //   sorter: this.sorter
    // })
    // this.getInterviewRequestResult = data.rows
  },

  methods: {
    // 分页加载
    // 触发时机：
    //   1、一进入页面，如果数据没有撑满整个屏幕，会触发
    //   2、当用户往下滑动，触底时，需要加载更多，会触发
    async onLoad() {
      // 由于请求加载太快了，所以加一个定时器控制一下，也可以看到正在加载的动画
      window.setTimeout(async () => {
        // 发起请求
        const { data } = await getInterviewRequest({
          current: this.current,
          sorter: this.sorter
        })
        // 将原本的与新得到的数据合并 concat() 方法，或者 push(...data.rows)也可以
        this.getInterviewRequestResult = this.getInterviewRequestResult.concat(data.rows)
        // this.getInterviewRequestResult = data.rows
        this.loading = false
        // 发起一次请求后，发起请求的当前页数，加一，保证加载下一页的数据
        this.current++
        // 如果下一页的页码已经大于最大页码数，证明数据已经加载完成，无需再加载
        if (this.current > data.pageTotal) {
          this.finished = true
        }
      }, 1000)
    },

    // 点击发送推荐请求数据
    recommendArticle() {
      this.current = 1 // 请求数据的当前页
      this.sorter = 'weight_desc' // 排序字段，推荐数据传 weight_desc
      this.getInterviewRequestResult = [] // 清空数据
      this.finished = false // finished 重置，重新有数据可以加载

      // 手动调用了加载更多，也需要手动将 loading 改为 true ，表示正在加载中（避免重复触发）
      this.loading = true
      this.onLoad()
    },

    // 点击发送最新请求数据
    newArticle() {
      this.current = 1 // 请求数据的当前页
      this.sorter = null // 最新数据
      this.getInterviewRequestResult = [] // 清空数据
      this.finished = false // finished 重置，重新有数据可以加载

      // 手动调用了加载更多，也需要手动将 loading 改为 true ，表示正在加载中（避免重复触发）
      this.loading = true
      this.onLoad()
    }
  }
}
</script>

<style lang="less" scoped>
.article-page {
  margin-bottom: 50px;
  margin-top: 44px;
  .my-nav {
    height: 44px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    display: flex;
    align-items: center;
    > a {
      color: #999;
      font-size: 14px;
      line-height: 44px;
      margin-left: 20px;
      position: relative;
      transition: all 0.3s;
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 0;
        height: 2px;
        background: #fa6d1d;
        transition: all 0.3s;
      }
      &.active {
        color: #fa6d1d;
        &::after {
          width: 14px;
        }
      }
    }
    .logo {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      > img {
        width: 64px;
        height: 28px;
        display: block;
        margin-right: 10px;
      }
    }
  }
}
</style>
